<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
      }
      th,
      td {
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
      }
      th {
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
      }
      .counter {
        margin: 0 5px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <template id="t">
      <template v-if="books.length > 0">
        <thead>
          <th>序号</th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in priceFormattedBooks" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <td>{{item.price}}</td>
            <td>
              <button @click="increase(index)">+</button>
              <span class="counter">{{item.count}}</span>
              <button :disabled="item.count<=1" @click="decrease(index)">-</button>
            </td>
            <td>
              <button @click="removeBook(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </template>
      <template v-else><h2>购物车为空~</h2></template>
      <h2>Total：{{formatPrice(total)}}</h2>
    </template>

    <script src="./vue.js"></script>
    <script>
      const app = {
        template: '#t',
        data() {
          return {
            books: [
              {
                id: 1,
                name: '《算法导论》',
                date: '2006-9',
                price: 85.0,
                count: 1
              },
              {
                id: 2,
                name: '《UNIX编程艺术》',
                date: '2006-2',
                price: 59.0,
                count: 1
              },
              {
                id: 3,
                name: '《编程珠玑》',
                date: '2008-10',
                price: 39.0,
                count: 1
              },
              {
                id: 4,
                name: '《代码大全》',
                date: '2006-3',
                price: 128.0,
                count: 1
              }
            ]
          }
        },
        methods: {
          increase(index) {
            this.books[index].count++
          },
          decrease(index) {
            this.books[index].count--
          },
          removeBook(index) {
            this.books.splice(index, 1)
          },
          formatPrice(price) {
            return '￥' + price
          }
        },
        computed: {
          total() {
            let total = 0
            this.books.forEach((i) => {
              total += i.price * i.count
            })
            return total
          },
          priceFormattedBooks() {
            return this.books.map((i) => {
              const item = Object.assign({}, i)
              item.price = '￥' + item.price
              return item
            })
          }
        }
      }
      Vue.createApp(app).mount('#app')
    </script>
  </body>
</html>
